<template>
  <view class="container">
    <view class="back"
    :style="{
      'background-color': userInfo.id ? '#F0F0F0' : '#FFFFFF'
    }"
    ></view>
    <view v-if="userInfo.id">
      
    <view style="top:0;left:0;width: 100%;"
    v-for="item in 2"
    :style="{
      'position': item === 1 ? 'fixed' : 'relative',
      'opacity': item === 1 ? 1 : 0,
      'z-index': item === 1 ? 999 : 0,
    }"
    >

      <kt-nav-bar
          :icon="$kt.file.byPath('tabbar/mine-selected.svg')"
          :title="$i18n.zhToGlobal('我的')"></kt-nav-bar>

          <view style="position: relative;background-color: #fff;padding: 20rpx;box-sizing: border-box;">
          <user-info-card
          :user-info="userInfo"
          ></user-info-card>
        <!-- 如果IP是中国大陆，且当前语言是中文简体，则显示到省份，如果不是，则显示到国家或地区 -->
        <!-- <view v-if="userInfo.ipStateAreaCode === 'CHN' && $i18n.getLanguageCode()==='zh_CN'" class="ip-tag">
          {{$i18n.zhToGlobal("IP属地")}}：{{ userInfo.ipProvinceName || stateAreaMap[userInfo.ipStateAreaCode] }}
        </view>
        <view v-else class="ip-tag">
        <text
        v-if="$i18n.getLanguageCode()!=='bg_BG'">{{$i18n.zhToGlobal("IP属地")}}{{": "}} </text>
        <text v-else>{{"IP"}}</text>:
        {{ stateAreaMap[userInfo.ipStateAreaCode] }}    
        </view> -->

        <view style="position: absolute;width: 100%;bottom: 10rpx;left:0;">
          <view style="text-align: right;">
            <image
            style="margin-right: 20rpx;"
             class="info-btn" 
             :src="$kt.file.byPath('icon/qrCode.svg')"></image>
          </view>
        </view>

      </view>

      </view>


      <view>

        
        <view
            class="box-box">

          <!-- <user-info-order-card></user-info-order-card> -->

          <view style="height: 30rpx"></view>
          <view>

            <!-- 换成菜单 -->
            <view class="menu-box">

              <view 
              v-if="userInfo.showPaiPan"
              class="menu" @click="$kt.router.navTo('/pages/address/address')">
                <view class="menu-text">{{ $i18n.zhToGlobal('排盘') }}</view>
              </view>

              <view class="menu" @click="$kt.router.navTo('/pages/user-info/user-info?userAccountId='+userInfo.id)">
                <view class="menu-icon-box">
                  <image
                      mode="aspectFill"
                      class="menu-icon"
                      :src="$kt.file.byPath('icon/userInfo.svg')"></image>
                </view>
                <view class="menu-text">{{ $i18n.zhToGlobal('个人资料') }}</view>
              </view>

              <view class="menu" @click="$kt.router.navTo('/pages/address/address')">
                <view class="menu-icon-box">
                  <image
                      mode="aspectFill"
                      class="menu-icon"
                      :src="$kt.file.byPath('icon/qrCode.svg')"></image>
                </view>
                <view class="menu-text">{{ $i18n.zhToGlobal('个人二维码') }}</view>
              </view>

              <view class="menu" @click="$kt.router.navTo('/pages/address/address')">
                <view class="menu-icon-box">
                  <image
                      mode="aspectFill"
                      class="menu-icon"
                      :src="$kt.file.byPath('icon/scan.svg')"></image>
                </view>
                <view class="menu-text">{{ $i18n.zhToGlobal('扫一扫') }}</view>
              </view>

              <view class="menu" @click="$kt.router.navTo('/pages/address/address')">
                <view class="menu-icon-box">
                  <image
                      mode="aspectFill"
                      class="menu-icon"
                      :src="$kt.file.byPath('icon/invite.svg')"></image>
                </view>
                <view class="menu-text">{{ $i18n.zhToGlobal('邀请') }}</view>
              </view>

              <view 
              v-if="false"
              class="menu" @click="$kt.router.navTo('/pages/address/address')">
                <view class="menu-icon-box">
                  <image
                      mode="aspectFill"
                      class="menu-icon"
                      :src="$kt.file.byPath('image/address.svg')"></image>
                </view>
                <view class="menu-text">{{ $i18n.zhToGlobal('收货地址') }}</view>
              </view>
              <view
                  @click="$kt.router.navTo('/pages/collect/collect')"
                  class="menu">

                <view class="menu-icon-box">
                  <image
                      mode="aspectFill"
                      class="menu-icon"
                      :src="$kt.file.byPath('icon/collection.svg')"></image>
                </view>
                <view class="menu-text">{{ $i18n.zhToGlobal('收藏') }}</view>
              </view>

              <view class="menu" @click="$kt.router.navTo('/pages/address/address')">
                <view class="menu-icon-box">
                  <image
                      mode="aspectFill"
                      class="menu-icon"
                      :src="$kt.file.byPath('icon/personMove.svg')"></image>
                </view>
                <view class="menu-text">{{ $i18n.zhToGlobal('会员转移') }}</view>
              </view>

              <view class="menu" @click="$kt.router.navTo('/pages/address/address')">
                <view class="menu-icon-box">
                  <image
                      mode="aspectFill"
                      class="menu-icon"
                      :src="$kt.file.byPath('icon/probabilityInvite.svg')"></image>
                </view>
                <view class="menu-text">{{ $i18n.zhToGlobal('概率邀约') }}</view>
              </view>

              <view
                  @click="$kt.router.toLanguageSelect()"
                  class="menu">

                <view class="menu-icon-box">
                  <image
                      mode="aspectFill"
                      class="menu-icon"
                      :src="$kt.file.byPath('kantboot/icon/language.svg')"></image>
                </view>
                <view class="menu-text">{{ $i18n.zhToGlobal('语言切换') }}</view>
              </view>

              <view
                  @click="$kt.router.toLanguageSelect()"
                  class="menu">

                <view class="menu-icon-box">
                  <image
                      mode="aspectFill"
                      class="menu-icon"
                      :src="$kt.file.byPath('icon/setting.svg')"></image>
                </view>
                <view class="menu-text">{{ $i18n.zhToGlobal('设置') }}</view>
              </view>

              <view
                  @click="isLogoutModal = true"
                  class="menu">

                <view class="menu-icon-box">
                  <image
                      mode="aspectFill"
                      class="menu-icon"
                      :src="$kt.file.byPath('kantboot/icon/logout.svg')"></image>
                </view>
                <view
                    class="menu-text">{{ $i18n.zhToGlobal('退出登录') }}
                </view>
              </view>
            </view>

          </view>

        </view>

      </view>

      <view style="height: 180rpx"></view>
    </view>


    <no-login
    ref="noLogin"
    ></no-login>

    <u-modal :show="isLogoutModal"
             :showCancelButton="true"
             :title="$i18n.zhToGlobal('提示')"
             :content="$i18n.zhToGlobal('是否确定退出登录')"
             :confirm-text="$i18n.zhToGlobal('确定')"
             :cancel-text="$i18n.zhToGlobal('取消')"
			 confirm-color="#000000"
             @cancel="isLogoutModal = false"
             :closeOnClickOverlay="true"
             @confirm="toLogout"
    ></u-modal>
  </view>
</template>

<script>
// import UserCommonInfoCard from "@/components/user-info/user-common-info-card.vue";
// import UserInfoOrderCard from "@/components/user-info/user-info-order-card.vue";

export default {
  // components: {UserInfoOrderCard, UserCommonInfoCard},
  data() {
    return {
      userInfo: {
        nickname: "",
        fileIdOfAvatar: "",
        genderCode: "male",
        email: "2453201633@qq.com",
      },
      isLogin: this.$kt.userAccount.getIsLogin(),
      isLogoutModal: false,
      // 国家获取地区
      stateAreaList: [],
      stateAreaMap: {},

    }
  },
  created() {
    // 监听登录成功事件
    this.$kt.event.on("login:success", () => {
      this.isLogin = true;
      this.userInfo = this.$kt.userAccount.getSelf();
    });
    // 监听用户信息改变事件
    // userAccount:selfInfo:change
    this.$kt.event.on("userAccount:selfInfo:change", (userInfo) => {
      // this.userInfo = this.$kt.userAccount.requestSelf();
      this.userInfo.nickname = userInfo.nickname || "";
      this.userInfo.email = userInfo.email || "";
      this.userInfo.phoneAreaCode = userInfo.phoneAreaCode || "";
      this.userInfo.phone = userInfo.phone || "";
      this.userInfo.genderCode = userInfo.genderCode || "male";
      this.userInfo.fileIdOfAvatar = userInfo.fileIdOfAvatar || "";
      this.userInfo.gmtCreate = userInfo.gmtCreate || "";

      this.userInfo.showPaiPan = userInfo.showPaiPan || false;
      
    });
    // userAccount:getSelf
    this.$kt.event.on("userAccount:getSelf", () => {
      this.userInfo = this.$kt.userAccount.getSelf();
    });
    this.$kt.event.on("language:change",()=>{
      console.log("language:change====");
      this.getAllStateArea();
    });
    this.getAllStateArea();
  },
  mounted() {
    this.isLogin = true;
    this.userInfo = this.$kt.userAccount.getSelf();
  },
  methods: {
    toLogout() {
      this.isLogin = false;
      this.$kt.userAccount.setIsLogin(false);
      this.$kt.storage.remove("token");

      uni.reLaunch({
        url: this.$kt.router.config.intoPath
      });
    },
    // /tool-state-area-web/stateArea/getAll
    async getAllStateArea() {
      this.stateAreaMap = {};
      await this.$request.post("/tool-state-area-web/stateArea/getAll",{data:{}})
      .then(res=>{
        this.stateAreaList = res.data;
          for (let i = 0; i < this.stateAreaList.length; i++) {
            const item = this.stateAreaList[i];
            this.stateAreaMap[item.code] = item.name;
          }
      });
      await this.$request.post("/system-language-web/languageI18n/getList",{
            data:{
              topKey:"ToolStateArea",
              bottomKey:"name",
              languageCode: this.$i18n.getLanguageCode()
            }
            
          }).then(res=>{
            for (let i = 0; i < res.data.length; i++) {
              const item = res.data[i];
              this.stateAreaMap[item.centerKey]=item.content;
            }
            try{
              // vue更新渲染
              // this.$forceUpdate();
            }catch (e) {
              // console.log(e);
            }
          });
    },
  }

}
</script>

<style lang="scss" scoped>
.info-btn{
  width: 25px;
  height: 25px;
}

.info-btn:active{
  transform: scale(.95);
}

.back {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #F0F0F0;
  top: 0;
  left: 0;
  z-index: -1;
}

.box-box {
  padding: 20rpx;
  box-sizing: border-box;
}

.box {
  position: relative;
  vertical-align: top;

  width: 100%;
  display: inline-block;
  text-align: left;
  background-color: #FFFFFF;
  border-radius: 20rpx;
}

.title {
  font-size: 32rpx;
  padding: 20rpx;
  box-sizing: border-box;
  font-weight: bold;
}

.line {
  width: 100%;
  height: 1rpx;
  background-color: #F0F0F0;
}

.menu-box {
  box-sizing: border-box;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 20rpx 20rpx 10rpx 20rpx;


  .menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    border-bottom: 1rpx solid #F0F0F0;
    background-color: #FFFFFF;
    margin-bottom: 20rpx;


    .menu-icon-box {
      width: 50rpx;
      height: 40rpx;
    }

    .menu-icon {
      width: 40rpx;
      height: 40rpx;
    }


  }

}

.menu:active {
  opacity: .6;
}

.ip-tag{
  position: absolute;
  padding: 10rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  font-size: 22rpx;
  color: #999;
  width: 300rpx;
  top:20rpx;
  right:20rpx;
  z-index: 9999;
  text-align: right;
}
</style>